<template>
    <div class="container-fluid" style="background: #fff">
        <div class="row page-title">
            <div class="col-xs-11">
                <h1>基础信息</h1>
            </div>
        </div>
        <el-form :form="userDetailForm" label-width="150px">
            <el-col :span="24">
                <el-form-item label="头像：">
                    <!-- <div style="width:70%;">{{userDetailForm.Img}}</div> -->
                    <img :src="userDetailForm.Img" class="image" style="width:50px;height:50px">
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="昵称：">
                    <div style="width:70%;">{{userDetailForm.UserName}}</div>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="电话：">
                    <div style="width:70%;">{{userDetailForm.Mobile}}</div>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="省：">
                    <div style="width:70%;">{{userDetailForm.ProvinceName}}</div>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="市：">
                    <div style="width:70%;">{{userDetailForm.CityName}}</div>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="工作单位：">
                    <div style="width:70%;">{{userDetailForm.Company}}</div>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="职称：">
                    <div style="width:70%;">{{userDetailForm.JobTitleName}}</div>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="注册时间：">
                    <div style="width:70%;">{{detailAddTime}}</div>
                </el-form-item>
            </el-col>
            <el-col :span="18">
                <el-form-item label="用户等级：">
                    <el-select v-model="userDetailForm.GradeName" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading" clearable style="width:50%;">
                        <el-option v-for="item in searchedSelectList" :key="item.GradeName" :label="item.ExpertName" :value="item.GradeName"></el-option>
                    </el-select>
                    <el-button type="primary" icon="el-icon-edit" @click="editUserLevel" :disabled="!(userDetailForm.GradeName)">修改用户等级</el-button>
                </el-form-item>
            </el-col>
        </el-form>
        <div class="row page-title">
            <div class="col-xs-11">
                <h1>专家信息</h1>
            </div>
        </div>
        <el-form label-width="150px" v-if="!showExpert">
            <el-col :span="6">
                <el-form-item label="该用户不是专家">
                    <el-button type="primary" @click="showExpert=true">指定专家</el-button>
                </el-form-item>
            </el-col>
        </el-form>
        <el-form label-width="150px" v-if="showExpert" :model="ExpertForm" ref="ExpertForm" :rules="rules">
            <el-col :span="24">
                <el-form-item label="头像：">
                    <el-upload
                        class="avatar-uploader"
                        :action="uploadUrl"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                    </el-upload>
                    <i class="el-text-danger el-icon-circle-close" v-if="!imageUrl"></i>
                    <span v-if="imageUrl">上传成功&nbsp;&nbsp;&nbsp;&nbsp;<i class="text-success el-icon-circle-check"></i></span>
                    <a :href="ExpertForm.ShowImage" target="_blank">查看图片</a>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="真实姓名：" prop="Name">
                    <el-input v-model="ExpertForm.Name"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8" :offset="4">
                <el-form-item label="职称：" prop="JobTitle">
                    <el-input v-model="ExpertForm.JobTitle"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="医院名称：" prop="Hospital">
                    <el-input v-model="ExpertForm.Hospital"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8" :offset="4">
                <el-form-item label="部门：" prop="Management">
                    <el-input v-model="ExpertForm.Management"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="20">
                <el-form-item label="描述：" prop="Diction">
                    <el-input type="textarea" v-model="ExpertForm.Diction"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="20">
                <el-form-item>
                    <el-button size="medium" type="primary" @click="saveExpert">保存</el-button>
                    <el-button @click="cancelExpert">撤销专家身份</el-button>
                </el-form-item>
            </el-col>
        </el-form>
        <div class="row page-title">
            <div class="col-xs-11">
                <h1>积分与金币</h1>
            </div>
        </div>
        <el-form label-width="150px" :form="pointGoldForm">
            <el-col :span="8">
                <el-form-item label="当前积分：">
                    <div style="width:70%;">{{userDetailForm.PointNum}}</div>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="赠送积分：">
                    <el-input style="width:70%;" v-model.number="pointGoldForm.point" :min="1" type="number"></el-input>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="Postuserpointrecord" :disabled='(!pointGoldForm.point)'>赠送</el-button>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="当前金币：">
                    <div style="width:70%;">{{userDetailForm.GoldNum}}</div>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="赠送金币：">
                    <el-input style="width:70%;" v-model.number="pointGoldForm.gold" :min="1" type="number"></el-input>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="PostUsergoldrecord" :disabled='(!pointGoldForm.gold)'>赠送</el-button>
                </el-form-item>
            </el-col>
        </el-form>
        <div class="row page-title">
            <div class="col-xs-11">
                <h1>用户行为</h1>
            </div>
        </div>
        <el-col :span="24" class="table-bottom-margin">
            <el-table :data="tableData" border style="width: 100%" :header-cell-class-name="headerbg">
                <el-table-column prop="Name" label="行为名称"></el-table-column>
                <el-table-column prop="Content" label="具体内容"> </el-table-column>
                <el-table-column prop="OperType" label="操作状态"> </el-table-column>
                <el-table-column prop="OperTime" label="操作时间" :formatter="DateFormatter"> </el-table-column>
            </el-table>    
        </el-col>
        <el-col :sapn="24" style="text-align:right" v-if="count>0">
            <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="currentPage"
                :page-sizes="[10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
        </el-col>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                user:JSON.parse( sessionStorage.getItem('user')),
                currentPage:1,
                pageSize:10,
                count:0,
                headerbg:'headerbg',//表格头部背景色
                dialogFormVisible: false,
                formLabelWidth: '25%',
                tableData:[],
                getListUrl:this.urlConfig+'/api/UserManage/GetActioninfo',//用户行为
                getUserDetailUrl:this.urlConfig+'/api/UserManage/GetUserById',//用户详情
                updateUserGradeUrl:this.urlConfig+'/api/UserManage/UpdateUserGrade',//修改用户等级
                cancelExpertUrl:this.urlConfig+'/api/UserManage/CancelExpert',//撤销专家身份
                PostExpertUrl:this.urlConfig+'/api/UserManage/SetExpert',//指定专家
                UpdateExpertUrl:this.urlConfig+'/api/UserManage/UpdateExpert',//修改专家信息
                PostuserpointrecordUrl:this.urlConfig+'/api/UserManage/Postuserpointrecord',//积分
                PostUsergoldrecordUrl:this.urlConfig+'/api/UserManage/PostUsergoldrecord',//金币
                DropDownListUrl:this.urlConfig+'/api/UserManage/GetUserGradeGroupList',//用户等级下拉列表
                uploadUrl:this.urlConfig+'/api/AdvertInfo/PostImgUpload/',//上传图片接口
                
                userDetailForm:{
                    GradeName:'',//用户等级
                },
                pointGoldForm:{

                },
                ExpertForm:{

                },
                rules:{//专家验证
                    Name:[
                        { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    ],
                    JobTitle:[
                        { required: true, message: '请输入职称', trigger: 'blur' },
                    ],
                    Hospital:[
                        { required: true, message: '请输入医院名称', trigger: 'blur' },
                    ],
                    Management:[
                        { required: true, message: '请输入部门', trigger: 'blur' },
                    ],
                    Diction:[
                        { required: true, message: '请输入描述', trigger: 'blur' },
                    ]
                },
                showExpert:false,//是否显示专家模块
                searchedSelectList: [],
                dropDownList: [],
                loading: false,

                imageUrl: '',
            }
        },
        components: {
        },
        mounted() {
            this.getList(10,this.currentPage);
            this.getDropDownList();
            this.getUserDetail();
        },
        watch: {
        },
        computed:{
          detailAddTime(){
            return (!this.userDetailForm.AddTime)?'':moment(this.userDetailForm.AddTime).format("YYYY-MM-DD HH:mm");
          },
        },
        methods:{
            handleAvatarSuccess(res, file) {//img
                if(res["Code"] == "200") {
                    this.ExpertForm.ShowImage = this.urlConfig+res.ImgUrl;
                }
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },//img
            remoteMethod(query) {//搜索下拉列表select 搜索触发
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.searchedSelectList = this.dropDownList.filter(item => {
                            return item.GradeName.indexOf(query) > -1;
                        });
                    }, 200);
                } else {
                    this.searchedSelectList = [];
                }
            },
            getDropDownList:function(){
                this.$http.get(this.DropDownListUrl,{
                    emulateJSON:true
                }).then(function(res){
                    if(res.body["Code"] == "200") {
                        this.dropDownList = JSON.parse(res.body.Data);
                        this.searchedSelectList = this.dropDownList;
                    }
                });
            },
            DateFormatter:function(row){
                return (!row.AddTime)?'':moment(row.AddTime).format("YYYY-MM-DD HH:mm");
            },
            getUserDetail:function(){//获取用户详情
                this.$http.get(this.getUserDetailUrl+'?Id='+this.$route.query.id,{
                    emulateJSON:true
                }).then(function(res){
                    if(res.body["Code"] == "200") {
                        this.userDetailForm = JSON.parse(res.body.Data);
                        this.ExpertForm = {};
                        this.showExpert = false;
                        if(this.userDetailForm.RoleName=='专家'){//当用户为专家时
                            this.showExpert = true;//显示专家表单
                            // this.ExpertForm.ShowImage = this.userDetailForm.ShowImage;
                            // this.ExpertForm.Name = this.userDetailForm.Name;
                            // this.ExpertForm.JobTitle = this.userDetailForm.JobTitle;
                            // this.ExpertForm.Hospital = this.userDetailForm.Hospital;
                            // this.ExpertForm.Management = this.userDetailForm.Management;
                            // this.ExpertForm.Diction = this.userDetailForm.Diction;
                            this.ExpertForm={
                                ShowImage:this.userDetailForm.ShowImage,
                                Name:this.userDetailForm.Name,
                                JobTitle:this.userDetailForm.JobTitle,
                                Hospital: this.userDetailForm.Hospital,
                                Management : this.userDetailForm.Management,
                                Diction : this.userDetailForm.Diction
                            };
                        }
                    }
                });
            },
            getList:function(PageSize,PageIndex){//获取用户行为列表
                this.$http.get(this.getListUrl+'?Uid='+this.$route.query.id+'&PageSize='+PageSize+'&PageNo='+PageIndex,{
                    emulateJSON:true
                }).then(function(res){
                    this.count = 0;
                    this.tableData = [];
                    if(res.body["Code"] == "200") {
                        this.count = res.body.Count;
                        this.tableData = JSON.parse(res.body.Data);
                    }
                });
            },
            editUserLevel:function(GradeName){//修改用户等级
                this.$http.post(this.updateUserGradeUrl,{UserId:this.$route.query.id,GradeName:this.userDetailForm.GradeName},{
                    emulateJSON: true
                }).then(function(res) {
                    if(res.body["Code"] == "200") {
                        this.getUserDetail();
                        this.$notify({title: '成功',message: '修改用户等级成功',type: 'success'});
                    }else{
                        this.$notify.error({title: '错误',message:res.body["Message"]});
                    }
                });
            },
            cancelExpert:function(){//撤销专家身份
                this.$confirm('确定要撤销用户的专家身份么，将不再会出现在APP专家列表中', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if(this.userDetailForm.RoleName=='专家'){//当该用户是专家时，调接口
                        this.$http.post(this.cancelExpertUrl+'?ExpertId='+this.userDetailForm.ExpertId,{},{
                            emulateJSON: true
                        }).then(function(res) {
                            if(res.body["Code"] == "200") {
                                this.showExpert = false;
                                this.ExpertForm={};
                            }else{
                                this.$notify.error({title: '错误',message:res.body["Message"]});
                            }
                        });
                    }else{//当该用户不是专家时，无需调接口
                        this.showExpert = false;
                        this.ExpertForm={};
                    }
                }).catch(() => {});
            },
            validateFun:function(){
                var errorInfo='';
                var testArr=['Name','JobTitle','Hospital','Management','Diction'];//专家
                for(var i=0;i<testArr.length;i++){
                    this.$refs.ExpertForm.validateField((testArr[i]),(re)=>{
                        errorInfo+=re+(re==''?'':', ');
                    })
                }
                return errorInfo;
            },
            saveExpert:function(){//专家
                var errorInfo=this.validateFun();
                if(!errorInfo){
                    this.ExpertForm.ExpertId = this.$route.query.id;
                    var PostUrl =this.PostExpertUrl;
                    if(this.userDetailForm.RoleName=='专家'){
                        PostUrl= this.UpdateExpertUrl;
                    }
                    this.$http.post(PostUrl,this.ExpertForm,{
                        emulateJSON: true
                    }).then(function(res) {
                        if(res.body["Code"] == "200") {
                            this.getUserDetail();
                            this.$notify({title: '成功',message: '指定专家成功',type: 'success'});
                        }else{
                            this.$notify.error({title: '错误',message:res.body["Message"]});
                        }
                    });
                }else{
                    this.$notify({title: '警告',message: errorInfo,type: 'warning',duration:1200});
                    return false;
                }
            },
            Postuserpointrecord:function(){//赠送积分
                this.$http.post(this.PostuserpointrecordUrl+'?Uid='+this.$route.query.id+'&PointNum='+Number(this.pointGoldForm.point)+'&LoginId='+ this.user.Id,{},{
                    emulateJSON: true
                }).then(function(res) {
                    if(res.body["Code"] == "200") {
                        this.getUserDetail();
                        this.pointGoldForm.point=null;
                        this.$notify({title: '成功',message: '赠送积分成功',type: 'success'});
                    }else{
                        this.$notify.error({title: '错误',message:res.body["Message"]});
                    }
                });
            },
            PostUsergoldrecord:function(){//赠送金币
                this.$http.post(this.PostUsergoldrecordUrl+'?Uid='+this.$route.query.id+'&Goldrecord='+Number(this.pointGoldForm.gold)+'&LoginId='+ this.user.Id,{},{
                    emulateJSON: true
                }).then(function(res) {
                    if(res.body["Code"] == "200") {
                        this.getUserDetail();
                        this.pointGoldForm.gold=null;
                        this.$notify({title: '成功',message: '赠送金币成功',type: 'success'});
                    }else{
                        this.$notify.error({title: '错误',message:res.body["Message"]});
                    }
                });
            },
            pageSizeChange:function(val){
                this.pageSize = val;
                this.getList(val,this.currentPage);
            },
            pageCurrentChange:function(val){
                this.currentPage = val;
                this.getList(this.pageSize,val);
            }
        }
    }
</script>
<style>
    .headerbg{
        background-color: #f4f3f3 !important;
    }
    input[type="file"]{
        display: none;
    }
</style>
